<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="font-awesome-4.7.0/css/font-awesome.css" rel="stylesheet">
    <link href="reset.css" rel="stylesheet">
    <link href="icon.css" rel="stylesheet">
    <link href="order.css" rel="stylesheet">
    <title>选择地址和用户</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
</head>
<body>
<div class="wrapper">
    <!-- 头部 -->
    <header>
        <p>选择地址和用户</p>
    </header>

    <!-- 用户选择部分 -->
    <div class="user-section">
        <h5>选择用户</h5>
        <ul class="user-list" id="userList">
            <!-- 用户信息将通过 AJAX 动态加载 -->
        </ul>
    </div>
</div>

<script>
    // 页面加载时调用后端接口获取用户信息
    $(document).ready(function () {
        $.ajax({
            url: 'http://127.0.0.1:8081/user/listAllUsers', // 后端接口 URL
            type: 'POST',
            contentType: 'application/json; charset=UTF-8',
            success: function (res) {
                if (res.flag) {
                    var users = res.data;
                    var html = '';
                    users.forEach(function (user) {
                        // 格式化用户信息
                        var userInfo = user.userName + (user.userSex === 1 ? '先生' : '女士') + ' ' + user.userId;
                        html += '<li onclick="selectUser(\'' + userInfo + '\', \'' + user.address + '\')">';
                        html += '  <p>' + userInfo + '</p>';
                        html += '  <p style="font-size: 12px; color: #666;">' + user.address + '</p>';
                        html += '  <i class="fa fa-angle-right"></i>';
                        html += '</li>';
                    });
                    $('#userList').html(html);
                } else {
                    alert(res.message);
                }
            },
            error: function (xhr, status, error) {
                alert('获取用户信息失败：' + xhr.statusText);
            }
        });
    });

    // 选择用户
    function selectUser(userInfo, address) {
        // 将选择的用户信息和地址存储到 localStorage
        localStorage.setItem('selectedUser', userInfo);
        localStorage.setItem('selectedAddress', address);
        // 返回上一页
        window.history.back();
    }
</script>
</body>
</html>